<template>
  <div class="payroll">
     <headNav title="工资条"></headNav>
    <group :title="title">
      <datetime
        :title="dateTime"
        v-model="value"
        format="YYYY-MM"
        @on-change="change"
        @on-cancel="cancel"
        @on-confirm="onConfirm"
      ></datetime>
    </group>
    <!-- v-show="this.salaryList.length > 0" -->
    <div class="payroll-body" v-show="isShowList">
      <h3 style="font-size: 18px;">
        <span>{{this.value}}</span> &nbsp; &nbsp;
        <span>工资明细</span>
      </h3>
      <!-- <ul v-for="(item,key,index) in salaryList" :key="index">
        <li>
          <span class="fl leftCul">{{key}}</span>
          <span class="fr">{{item}}</span>
        </li>
      </ul> -->
      <ul v-for="(item,index) in salaryList" :key="index">
        <li>
          <span class="fl leftCul">{{item.key}}</span>
          <span class="fr">{{item.value}}</span>
        </li>
      </ul>
    </div>
    <p class="leftCul" v-show="isShowMore">无更多信息~</p>
  </div>
</template>
<script>
import headNav from '@/components/headNav/headNav';
import { mapState, mapGetters } from 'vuex'
import { Datetime, Group } from 'vux'
export default {
  name: 'payroll',
  components: {
    Datetime,
    Group,
    headNav
  },
  data () {
    return {
      title: '工资查询',
      dateTime: '选择日期',
      value: '',
      teacherId: '',
      salaryList: {},
      isShowList: false,
      isShowMore: false,
      objArr: []
    }
  },
  computed: {
    ...mapGetters(['cookiesObj', 'cookieStart'])
  },
  mounted () {
    this.setTitle('工资条')
    this.teacherId = this.cookiesObj.teacherId
  },
  methods: {
    change (val) {
      // console.log('change', val)
      this.onConfirm(val)
    },
    onConfirm (val) {
      let time = val.slice(0, 7)
      this.value = time
      let params = {
        month: time,
        teachId: this.teacherId
      }
      this.$store.dispatch('payroll/GetTeachsalarydetaileds', params).then(res => {
        let result = JSON.parse(res)
        // console.log(result)
        if (result.Code == '200') {
          this.salaryList = result.Data
          // console.log(this.salaryList)
          // this.objArr = this.objToArr(this.salaryList)
          if (this.salaryList) {
            this.isShowList = true
            this.isShowMore = false
          }
        } else {
          this.salaryList = {}
          this.isShowList = false
          this.isShowMore = true
        }
      }).catch(err => {
        console.log(err)
      })
    },
    objToArr (obj) {
      var arrNew = []
      for (var x in obj) {
        // var item = {}
        // item[x] = obj[x]
        var arr = []
        arr.push(x)
        arr.push(obj[x])
        arrNew.push(arr)
      }
      var stringArr = []
      var numArr = []
      for (var i = 0; i < arrNew.length; i++) {
        if (arrNew[i][0] == '姓名' || arrNew[i][0] == '电话' || arrNew[i][0] == '部门' || arrNew[i][0] == '实发工资') {
          stringArr.push(arrNew[i])
        } else {
          numArr.push(arrNew[i])
        }
      }
      var objArr = stringArr.concat(numArr)
      // console.log(stringArr)
      // console.log(numArr)
      return objArr
    },
    cancel () {
      console.log('取消')
    }
  }
}
</script>
<style lang="less" scoped>
.payroll {
  padding: 0;
  background: #f9f8f8;
  /deep/ .weui-cells__title {
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 10px;
    color: #000;
  }
  /deep/ .weui-cells {
    font-size: 14px;
    padding: 0.10rem 0;
  }
  .payroll-body {
    padding: 10px 40px;

    ul {
      font-size: 15px;
      overflow: hidden;
    }
    li {
      padding-top: 10px;
    }
    .leftCul {
      color: rgba(165, 162, 162, 0.87);
    }
  }
  p {
    &.leftCul {
      padding: 30px 0 0 40px;
      font-size: 16px;
    }
  }
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
}
</style>
